<template>
  <div class="btn-box">
    <button class="draw" @click="draw()">绘制</button>
    <button class="disDraw" @click="disDraw()">关闭绘制</button>
    <button class="allEdit" @click="allEdit()">全体编辑</button>
    <button class="allDisedit" @click="allDisedit()">全体禁止编辑</button>
    <button class="changeEdit" @click="changeEdit()">全体切换编辑</button>
    <button class="isEdit" @click="isEdit()">是否启用编辑</button>
    <button class="changeDrag" @click="changeDrag()">启用拖拽</button>
    <button class="removalMode" @click="removalMode()">启用移除</button>
    <button class="cutMode" @click="cutMode()">启用切割</button>
  </div>
  <div id="map"></div>
</template>

<script>
import { nextTick } from "vue";
export default {
  data() {
    return {
      plot: [
        { lat: 40.033832128660656, lng: 116.43950549521394 },
        { lat: 40.037037649320915, lng: 116.51794216208019 },
        { lat: 40.017591564794856, lng: 116.56509054003938 },
        { lat: 39.98309904254203, lng: 116.56788813245662 },
        { lat: 39.957060705589605, lng: 116.4628477928944 },
        { lat: 40.01201889394226, lng: 116.40414877960966 },
      ],
      map: "",
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 12, // 缩放比列
        zoomControl: false, // 禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
      });
      // .fitWorld(); 全世界
      let name = L.tileLayer(
        "https://maps.huidatech.cn/e173754b3b1bbd62a0be9c4afea73fdf/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galile"
      ).addTo(this.map);
      let name2 = L.tileLayer(
        "https://maps.huidatech.cn/e173754b3b1bbd62a0be9c4afea73fdf/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Gali"
      ).addTo(this.map);

      // let name3 = L.tileLayer(
      //   "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
      //   {
      //     maxZoom: 18,
      //     attribution:
      //       'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
      //       'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      //     id: "mapbox/streets-v11",
      //     tileSize: 512,
      //     zoomOffset: -1,
      //   }
      // ).addTo(this.map);
      /*
        定位模块
        const that = this;
        function onLocationFound(e) {
        var radius = e.accuracy / 2;
        console.log(e);
        // console.log(L);
        // console.log(this.$L);

        L.marker(e.latlng)
          .addTo(that.map)
          .bindPopup("You are within " + radius + " meters from this point")
          .openPopup();

        L.circle(e.latlng, radius).addTo(that.map);
      }

      function onLocationError(e) {
        alert(e.message);
      }
      this.map.on("locationfound", onLocationFound);
      this.map.on("locationerror", onLocationError);
      this.map.locate({ setView: true, maxZoom: 24 }); */

      //   name.remove(this.map)
      //   this.map.removeLayer(name)

      // 添加标记
      // var marker = this.$L
      //   .marker([40.02404009136253, 116.50641060224784])
      //   .addTo(this.map);

      // 画一个多边形
      //   var polygon = this.$L
      //     .polygon([
      //       [40.033832128660656, 116.43950549521394],
      //       [40.037037649320915, 116.51794216208019],
      //       [39.957060705589605, 116.4628477928944],
      //       [40.01201889394226, 116.40414877960966],
      //     ])
      //     .addTo(this.map);

      // 给marker添加点击事件
      // marker.bindPopup("<b>Hello world!</b><br>I am a popupsad.").openPopup();
      this.map.pm.addControls({
        position: "topleft",
        drawPolygon: false, // 添加绘制多边形
        drawMarker: true, // 添加按钮以绘制标记
        drawCircleMarker: false, // 添加按钮以绘制圆形标记
        drawPolyline: false, // 添加按钮绘制线条
        drawRectangle: true, // 添加按钮绘制矩形
        drawCircle: false, //  添加按钮绘制圆圈
        editMode: true, //  添加按钮编辑多边形
        dragMode: true, //   添加按钮拖动多边形
        cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
        removalMode: true, // 清除图层
      });

      // 设置绘制线条颜色
      this.map.pm.setPathOptions({
        color: "orange",
        fillColor: "green",
        fillOpacity: 0.4,
      });
      this.map.pm.setLang("zh"); // 设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
      this.getlatLngs();
    },

    // 绘制
    draw() {
      this.map.pm.enableDraw("Polygon", {
        snappable: false,
        snapDistance: 10,
      });

      //   this.map.pm.enableDraw("Marker", { snappable: false });
      //   this.map.pm.enableDraw("CircleMarker", { snappable: false });
      // this.getlatLngs()
    },

    // 禁止绘制
    disDraw() {
      let options = {
        templineStyle: {
          color: "green",
        },

        hintlineStyle: {
          color: "yellow",
          dashArray: [5, 5],
        },
      };
      this.map.pm.disableDraw("Polygon", options);
      //    this.map.pm.disableDraw('Marker');
      //    this.map.pm.disableDraw('CircleMarker');
    },

    // 获取绘制的坐标
    getlatLngs() {
      // pm:drawstart 开始第一个点的时候调用
      // pm:drawend  禁止绘制时调用
      // pm:create  创建完成时调用
      this.map.on("pm:drawstart", (e) => {
        console.log(e, "first");
      });
      this.map.on("pm:intersect", (e) => {
        console.log(e, "不允许香蕉");
      });
      this.map.on("pm:create", (e) => {
        console.log(e, "绘制完成时调用");
        if (e.shape === "Marker") {
          console.log(e.layer._latlng, "绘制坐标");
          alert("精度:" + e.layer._latlng.lat + ",纬度:" + e.layer._latlng.lng);
        } else {
          console.log(e.layer._latlngs[0], "绘制坐标");
        }
        e.layer.pm.enable({
          allowSelfIntersection: false,
          preventMarkerRemoval: false, // 禁止右键删除点
        });
        e.layer.on("pm:edit", (e) => {
          console.log(e, "拖动");
          console.log(e.target._latlngs[0], "拖动后的坐标");
        });
        e.layer.on("pm:vertexadded", (e) => {
          console.log(e, "添加顶点");
        });
        e.layer.on("pm:intersect", (e) => {
          console.log(e, "不能香蕉");
        });
        e.layer.on("pm:cut", (e) => {
          console.log(e, "切割");
        });
      });
    },

    // 开启全体编辑按钮
    allEdit() {
      this.map.pm.toggleGlobalEditMode();
    },

    // 禁用全局编辑按钮
    allDisedit() {
      this.map.pm.disableGlobalEditMode();
    },

    // 全局编辑切换
    changeEdit() {
      this.map.pm.toggleGlobalEditMode();
    },

    // 判断是否全局编辑
    isEdit() {
      alert(this.map.pm.globalEditEnabled());
    },

    // 切换拖拽
    changeDrag() {
      this.map.pm.toggleGlobalDragMode();
      // 是否启用全局拖动模式
      alert(this.map.pm.globalDragModeEnabled());
    },

    // 移除功能
    removalMode() {
      this.map.pm.toggleGlobalRemovalMode();
    },

    // 切割
    cutMode() {
      // 开始
      //   this.map.pm.Draw.Cut.enable({
      //     allowSelfIntersection: false
      //   });
      // 关闭
      //   this.map.pm.Draw.Cut.disable()
      // 切换
      this.map.pm.Draw.Cut.toggle();
    },
  },
};
</script>

<style lang="stylus">
// @import "~@/assets/css/global.styl"
@import 'assets/css/global.styl'
html,body
  width 100%
  height 100%
#map
  width 100%
  height calc(100vh)
  z-index 1
.btn-box
  position absolute
  z-index 2
  margin 10px 60px
  button
    margin-left 10px
</style>
